// 控制台
<template>
  <div class="home">
    <!-- 导航 -->
    <div class="navBar">
      <navBar></navBar>
    </div>
    <!-- 主体 -->
    <div class="conten">
      <!-- 时间 -->
      <div class="dateShow">
        <p>今日，2020年4月23日 星期三</p>
      </div>

      <!-- 展示区域 -->
      <div class="wrapBox">
        <div class="wrapL">
          <!-- 概况 -->
          <div class="survey cardP">
            <div
              class="surceyItem"
              v-for="(item, index) in survey"
              :key="index"
            >
              <router-link to="tabList">{{ item.name }} </router-link>
              <span>{{ item.value }}</span>
            </div>
          </div>
          <!-- 已上线广告 -->
          <div class="onlinAds cardP">
            <el-carousel :interval="4000" type="card" height="150px">
              <el-carousel-item v-for="(item, index) in 6" :key="index">
                <h3 class="medium">{{ item }}</h3>
              </el-carousel-item>
            </el-carousel>
          </div>
          <!-- 市场分析 -->
          <div class="market cardP">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane
                :label="item.name"
                :name="index.toString()"
                v-for="(item, index) in market"
                :key="index"
              >
                <!-- 列表有数据时展示 -->
                <ul v-if="item.list.length > 0">
                  <li v-for="(i, id) in item.list" :key="id">
                    <a href="#">{{ i.name }}</a
                    ><span>{{ i.date }}</span>
                  </li>
                </ul>
                <!-- 列表无数据时 -->
                <p v-else>
                  {{ "暂无" + item.name }}
                </p>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>

        <div class="wrapR">
          <!-- 记录 -->
          <div class="record cardP">
            <el-tabs v-model="recordName" @tab-click="handleClick">
              <el-tab-pane
                :label="item.name"
                :name="index.toString()"
                v-for="(item, index) in record"
                :key="index"
              >
                <!-- 列表有数据时展示 -->
                <ul v-if="item.list.length > 0">
                  <li v-for="(i, id) in item.list" :key="id">
                    <a href="#">{{ i.name }}</a
                    ><span>{{ i.date }}</span>
                  </li>
                </ul>
                <!-- 列表无数据时 -->
                <p v-else>
                  {{ "暂无" + item.name }}
                </p>
              </el-tab-pane>
            </el-tabs>
          </div>
          <!-- 公告 -->
          <div class="notice cardP">
            <h3>公告</h3>
            <ul>
              <li v-for="(item, index) in 8" :key="index">
                <a href="#">关于lct系统升级的公告</a>
                <span>2020-10-25</span>
              </li>
            </ul>
          </div>
        </div>
        <!-- 移动端 -->
        <div class="phoneBox cardP"></div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="footerBar">
      <footBar></footBar>
    </div>

    <!-- 右侧分享按钮 -->

    <foundCard></foundCard>
  </div>
</template>


<script>
// @ is an alias to /sr
import navBar from "../components/header";
import footBar from "../components/footer";
import foundCard from "../components/foundCard";
export default {
  name: "Home",
  components: {
    navBar,
    footBar,
    foundCard,
  },
  data() {
    return {
      activeName: "0",
      recordName: "0",
      survey: [
        { name: "我的广告", value: "22" },
        { name: "待支付", value: "2" },
        { name: "最近支付", value: "17" },
        { name: "审核通过", value: "20" },
        { name: "审核不通过", value: "5" },
      ],
      record: [
        {
          name: "账单",
          list: [
            { name: "我的第一条账单", date: "2020-04-07 15:06:55" },
            { name: "我的第一条账单", date: "2020-04-07 15:06:55" },
            { name: "我的第一条账单", date: "2020-04-07 15:06:55" },
            { name: "我的第一条账单", date: "2020-04-07 15:06:55" },
            { name: "我的第一条账单", date: "2020-04-07 15:06:55" },
          ],
        },
        {
          name: "收益",
          list: [
            { name: "我的第一次收益", date: "2020-04-07 15:06:55" },
            { name: "我的第一次收益", date: "2020-04-07 15:06:55" },
            { name: "我的第一次收益", date: "2020-04-07 15:06:55" },
            { name: "我的第一次收益", date: "2020-04-07 15:06:55" },
            { name: "我的第一次收益", date: "2020-04-07 15:06:55" },
          ],
        },
        {
          name: "提现记录",
          list: [
            { name: "我的第一次提现", date: "2020-04-07 15:06:55" },
            { name: "我的第一次提现", date: "2020-04-07 15:06:55" },
            { name: "我的第一次提现", date: "2020-04-07 15:06:55" },
            { name: "我的第一次提现", date: "2020-04-07 15:06:55" },
            { name: "我的第一次提现", date: "2020-04-07 15:06:55" },
          ],
        },
        {
          name: "充值记录",
          list: [],
        },
      ],
      market: [
        {
          name: "科技",
          list: [
            { name: "我的第一条账单", date: "2020-04-07 15:06:55" },
            { name: "我的第一条账单", date: "2020-04-07 15:06:55" },
            { name: "我的第一条账单", date: "2020-04-07 15:06:55" },
            { name: "我的第一条账单", date: "2020-04-07 15:06:55" },
            { name: "我的第一条账单", date: "2020-04-07 15:06:55" },
          ],
        },
        {
          name: "生活",
          list: [
            { name: "我的第一次收益", date: "2020-04-07 15:06:55" },
            { name: "我的第一次收益", date: "2020-04-07 15:06:55" },
            { name: "我的第一次收益", date: "2020-04-07 15:06:55" },
            { name: "我的第一次收益", date: "2020-04-07 15:06:55" },
            { name: "我的第一次收益", date: "2020-04-07 15:06:55" },
          ],
        },
        {
          name: "医美",
          list: [
            { name: "我的第一次提现", date: "2020-04-07 15:06:55" },
            { name: "我的第一次提现", date: "2020-04-07 15:06:55" },
            { name: "我的第一次提现", date: "2020-04-07 15:06:55" },
            { name: "我的第一次提现", date: "2020-04-07 15:06:55" },
            { name: "我的第一次提现", date: "2020-04-07 15:06:55" },
          ],
        },
        {
          name: "房产",
          list: [],
        },
      ],
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style scoped lang="less">
body,
html {
  background-color: #999;
}

.footerBar {
  position: fixed;
  bottom: 0px;
  width: 100%;
}
// 控制台
.height_auto {
  height: auto;
  overflow: hidden;
}
.conten {
  .dateShow {
    p {
      margin: 0;
      line-height: 50px;
      font-size: 18px;
      color: #8d8d8d;
      font-weight: bold;
      text-align: left;
          font-family: cursive;
      padding: 10px 15px 0px 15px;
      box-sizing: border-box;
    }
  }
  width: 100%;
  .height_auto();
  .wrapBox {
    width: 100%;
    padding: 10px 15px;
    margin-bottom: 70px;
    box-sizing: border-box;
    .height_auto();
    .cardP {
      background-color: #fff;
      margin-bottom: 10px;
      border: 1px #e7e7e7 solid;
      padding: 15px;
      box-sizing: border-box;
    }
    // 左侧区域
    .wrapL {
      float: left;
      width: 69%;
      .height_auto();
      > div {
        height: 200px;
      }
      .survey {
        display: flex;
        justify-content: space-around;
        flex-wrap: nowrap;
        .surceyItem {
          height: 160px;
          cursor: pointer;
          a {
            display: block;
            height: 80px;
            line-height: 80px;
            font-size: 18px;
            color: #337ab7;
            font-weight: bold;
            text-align: center;
            margin: 0;
            text-decoration: none;
          }
          span {
            display: block;
            height: 80px;
            line-height: 40px;
            font-size: 24px;
            color: #777;
            font-weight: bold;
            text-align: center;
          }
        }
      }
      .market {
        p {
          font-size: 16px;
          columns: #666;
        }
        ul {
          padding: 0;
          .height_auto();
          margin: 0;
          height: 110px;
          overflow: auto;
          li {
            list-style: none;
            display: flex;
            justify-content: space-between;
            flex-wrap: nowrap;
            height: 30px;
            a {
              display: block;
              line-height: 30px;
              color: #666;
              font-size: 14px;
              text-decoration: none;
            }
            span {
              display: block;
              line-height: 30px;
              color: #666;
              font-size: 14px;
            }
          }
        }
      }
    }
    .wrapR {
      float: right;
      width: 30%;
      .height_auto();
      .record {
        height: 350px;
        p {
          font-size: 16px;
          columns: #666;
        }
        ul {
          padding: 0;
          margin: 0;
          .height_auto();
          li {
            list-style: none;
            display: flex;
            justify-content: space-between;
            flex-wrap: nowrap;
            height: 30px;
            a {
              display: block;
              line-height: 30px;
              color: #666;
              font-size: 14px;
              text-decoration: none;
            }
            span {
              display: block;
              line-height: 30px;
              color: #666;
              font-size: 14px;
            }
          }
        }
      }
      .notice {
        height: 260px;
        h3 {
          margin: 0px;
          font-size: 14px;
          color: #333;
          line-height: 30px;
          font-weight: bold;
          text-align: left;
        }
        ul {
          padding: 0;
          margin: 0;
          .height_auto();
          height: 200px;
          overflow: auto;
          li {
            list-style: none;
            a {
              float: left;
              display: inline-block;
              width: calc(100% - 250px);
              height: 30px;
              line-height: 30px;
              font-size: 14px;
              color: #666;
              text-decoration: none;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              text-align: left;
            }
            span {
              float: right;
              display: inline-block;
              width: 140px;
              height: 30px;
              line-height: 30px;
              font-size: 14px;
              color: #999;
            }
          }
        }
      }
    }
    .phoneBox {
      float: left;
      width: 100%;
      height: 300px;
    }
    // 轮播图
    .el-carousel__item h3 {
      color: #475669;
      font-size: 14px;
      opacity: 0.75;
      line-height: 150px;
      margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
      background-color: #d3dce6;
    }
    // 右侧区域
  }
}
</style>

<style lang="less">
body,
htm {
  background-color: #f5f5f5;
}
</style>